<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2020/9/9
  Time: 11:11
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8">
    <title>汽车租赁系统</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="icon" href="favicon.ico">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/layui/css/layui.css" media="all" />
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/layui_ext/dtree/dtree.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/layui_ext/dtree/font/dtreefont.css">
    </head>
<body>
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>查询条件</legend>
    </fieldset>
    <form  class="layui-form">
    <div class="layui-form-item">
    <label class="layui-form-label">菜单名称</label>
    <div class="layui-input-inline">
    <input type="text" name="name" placeholder="请输入菜单名称" autocomplete="off" class="layui-input">
    </div>
    <div class="layui-input-inline">
    <button class="layui-btn layui-btn-normal layui-icon layui-icon-search layui-btn-radius layui-btn-sm" lay-submit
    lay-filter="doSearch">查询
    </button>
    <button type="reset" class="layui-btn layui-btn-warm layui-icon layui-icon-refresh layui-btn-radius layui-btn-sm">重置
    </button>
    </div>
    </div>
    </form>

    <table class="layui-hide" lay-filter="menuTable" id="test"></table>
    <script type="text/html" id="toolbarMenu">
    <div class="layui-btn-container">
    <button class="layui-btn layui-btn-sm" lay-event="menuAdd" >添加</button>
    <button class="layui-btn layui-btn-sm" lay-event="delAll">批量删除</button>
    </div>
    </script>
    <script id="barMenu" type="text/html">
    <a class="layui-btn layui-btn-xs layui-btn-radius" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs layui-btn-radius" lay-event="del">删除</a>
    </script>

    <!-- 添加和修改的弹出层开始 -->
    <div style="display: none;padding: 20px" id="saveOrUpdateDiv">
    <form class="layui-form" lay-filter="dataFrm" id="dataFrm">
    <div class="layui-form-item">
    <label class="layui-form-label">父级菜单：</label>
    <div class="layui-input-block">
    <div class="layui-unselect layui-form-select" id="pid_div">
    <div class="layui-select-title">
    <input type="hidden" name="pid" id="pid">
    <ul id="menuTree" class="dtree" data-id="0" style="width: 100%;"></ul>
    <i class="layui-edge"></i>
    </div>
    </div>

    </div>
    </div>
    <div class="layui-form-item">
    <label class="layui-form-label">菜单名称:</label>
    <div class="layui-input-block">
    <input type="hidden" name="id">
    <input type="text" name="name" placeholder="请输入菜单名称"lay-verify="required" autocomplete="off" class="layui-input">
    </div>
    </div>
    <div class="layui-form-item">
    <label class="layui-form-label">菜单地址:</label>
    <div class="layui-input-block">
    <input type="text" name="href" placeholder="请输入菜单地址" autocomplete="off" class="layui-input">
    </div>
    </div>
    <div class="layui-form-item">
    <div class="layui-inline">
    <label class="layui-form-label">菜单图标:</label>
    <div class="layui-input-inline">
    <input type="text" name="icon" placeholder="请输入菜单图标"  autocomplete="off" class="layui-input">
    </div>
    </div>
    <div class="layui-inline">
    <label class="layui-form-label">TARGET:</label>
    <div class="layui-input-inline">
    <input type="text" name="target" placeholder="请输入TRAGET" autocomplete="off" class="layui-input">
    </div>
    </div>
    </div>
    <div class="layui-form-item">
    <div class="layui-inline">
    <label class="layui-form-label">是否展开:</label>
    <div class="layui-input-inline">
    <input type="radio" name="open" value="1" title="展开">
    <input type="radio" name="open" value="0" title="不展开" checked="checked">
    </div>
    </div>
    <div class="layui-inline">
    <label class="layui-form-label">是否可用:</label>
    <div class="layui-input-inline">
    <input type="radio" name="available" value="1" checked="checked" title="可用">
    <input type="radio" name="available" value="0" title="不可用">
    </div>
    </div>
    </div>
    <div class="layui-form-item">
    <div class="layui-input-block" style="text-align: center;padding-right: 120px">
    <button type="button" class="layui-btn layui-btn-normal layui-btn-md layui-icon layui-icon-release layui-btn-radius" lay-filter="doSubmit" lay-submit="">提交</button>
    <button type="reset" class="layui-btn layui-btn-warm layui-btn-md layui-icon layui-icon-refresh layui-btn-radius">重置</button>
    </div>
    </div>
    </form>
    </div>

    <script type="text/javascript" src="${pageContext.request.contextPath}/static/layui/layui.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/js/index.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/js/cache.js"></script>

    <script>
        var tab;
        layui.extend({
            dtree: '${pageContext.request.contextPath}/static/layui_ext/dtree/dtree'
        }).use(
            ['table', 'layer', 'dtree', 'form', 'jquery'], function () {
                var table = layui.table;
                var form = layui.form;
                var $ = layui.jquery;
                var layer = layui.layer;
                var dtree = layui.dtree;


                tab = table.render({
                    elem: '#test',
                    url: "${pageContext.request.contextPath}/menu/menuRightShow",
                    cellMinWidth: 30,
                    page: {limit: 5, limits: [5, 10, 15, 20]},
                    toolbar: '#toolbarMenu',//开启头部工具栏，并为其绑定左侧模板
                    cols: [[
                        {field: 'id', width: 80, title: 'ID', sort: true}
                        , {field: 'pid', width: 80, title: '父ID', sort: true}
                        , {field: 'name', width: 160, title: '菜单名'}
                        , {field: 'href', width: 200, title: '地址'}
                        , {
                            field: 'open', width: 80, title: '是否打开', templet: function (data) {
                                return data.open == 1 ? '展开' : '<span style="color:red;">不展开</span>'
                            }
                        }
                        , {field: 'target', width: 120, title: '跳转方式'}
                        , {
                            field: 'icon', width: 80, title: '图标', templet: function x(data) {
                                return '<i class="layui-icon">' + data.icon + '</i> ';
                            }
                        }
                        , {
                            field: 'available', width: 120, title: '是否可用', templet: function (data) {
                                return data.available == 1 ? '可用' : '<span style="color:red;">不可用</span>';
                            }
                        }
                        , {fixed: 'right', title: '操作', toolbar: '#barMenu', width: 120}
                    ]]
                })
                form.on('submit(doSearch)', function (data) {
                    //ajax数据
                    tab.reload({
                        where: data.field
                    })
                    //不跳转页面
                    return false;
                })
                //头工具栏事件
                table.on('toolbar(menuTable)', function (obj) {
                    if (obj.event == 'menuAdd') {
                        menuAdd()
                    } else if (obj.event == 'delAll') {
                        alert("正在开发中。。。。")
                    }
                })
                var index;

                function menuAdd() {
                    //打开弹出框
                    index = layer.open({
                        type: 1,
                        title: '添加菜单',
                        content: $("#saveOrUpdateDiv"),
                        area: ['800px', '440px'],
                        success: function () {
                            // 页面数据要清除
                            $("#dataFrm")[0].reset();
                        }
                    })
                }

                // 弹出层 提交按钮触发事件
                form.on('submit(doSubmit)', function (data) {
                    // 获取页面上输入的内容
                    var params = $("#dataFrm").serializeArray();
                    if (params[1].value != "") {
                        $("#pid").val(params[1].value)
                    }
                    var param = $("#dataFrm").serialize()
                    layer.confirm("确定要提交该数据么", function (r) {
                        $.post("${pageContext.request.contextPath}/menu/add", param, function (r) {
                            layer.msg(r.msg)
                            layer.close(index)
                            tab.reload()
                            // 左侧菜单树 需要刷新
                            window.parent.left.DemoTree.reload()
                        })
                    })
                    return false;
                })
                //监听行工具事件
                table.on('tool(menuTable)', function (obj) {
                    var data = obj.data;
                    if (obj.event == "edit") {
                        menuUpdate(data)
                    } else if (obj.event == "del") {
                        menuDelete(data.id)
                    }
                })


        function menuDelete(deleteId) {
            layer.confirm("确定要删除该数据吗", function () {
                // 1. 该菜单是否有子菜单
                $.post("${pageContext.request.contextPath}/menu/checkChildren", {"id": deleteId}, function (r) {
                    if (r.data != 0) {
                        // 有子菜单， 不能删除
                        layer.msg("该菜单有子菜单，不能删除")
                    } else {
                        $.post("${pageContext.request.contextPath}/menu/deleteById", {"id": deleteId}, function (rr) {
                            layer.msg(rr.msg)
                            tab.reload()
                            // 左侧菜单树 需要刷新
                            window.parent.left.DemoTree.reload()
                        })
                    }
                })
            })
        }
                function menuUpdate(data) {
                    index = layer.open({
                        type: 1,
                        title: '修改菜单',
                        content: $("#saveOrUpdateDiv"),
                        area: ['800px', '440px'],
                        success: function () {
                            // 给form表单设置值
                            // 把当前行的数据data显示到form表单中去,form表单中是有id隐藏字段
                            form.val("dataFrm", data)
                            // 下拉框设置值
                            if (data.pid != 0) {
                                // 把数据库保存的值设置到下拉框中
                                var p = dtree.dataInit("menuTree", data.pid)
                                $("#menuTree_select_input_id").val(p.context)
                            }
                            // 给pid隐藏字段赋值
                            $("#pid").val(data.pid)

                        }
                    })

                }

                //初始化树
                var menuTree = dtree.renderSelect({
                    elem: "#menuTree",
                    url: "${pageContext.request.contextPath}/menu/menuLeftDtreeShow",
                    dataStyle: "layuiStyle",  //使用layui风格的数据格式
                    response: {message: "msg", statusCode: 0}  //修改response中返回数据的定义
                })

        })


        function reloadTable(id) {
            tab.reload({
                where: {
                    "id": id
                },
                page: {
                    curr: 1//重新从第一页开始
                }
            })
        }

    </script>
</body>
</html>
